<template>
  <el-dialog
    :visible="visible"
    title="对比"
    width="1100px"
    class="knowledge-dialog"
    :close-on-click-modal="false"
    append-to-body
    @close="close"
  >
    <div class="app-container">
      <el-row v-loading="loading" :gutter="20">
        <el-col :span="12">
          <ContrastTree :data="oldTvStructureTree" />
        </el-col>
        <el-col :span="12">
          <ContrastTree :data="newTvStructureTree" />
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close" icon="el-icon-close">{{$t('btn.close')}}</el-button>
      <el-button type="primary" @click="update" icon="el-icon-check">{{ $t('btn.update') }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import ContrastTree from './ContrastTree'
import { changeContrast } from '@/api/fmea/common/fmeaChange'
export default {
  name: 'ContrastDialog',
  components: { ContrastTree },
  props: {
    visible: {
      type: Boolean
    },
    params: {
      type: Object
    }
  },
  data() {
    return {
      newTvStructureTree: [],
      oldTvStructureTree: [],
      loading: false
    }
  },
  created() {
    this.getChangeContrast()
  },
  methods: {
    getChangeContrast() {
      this.loading = true
      changeContrast(this.params).then((res) => {
        this.newTvStructureTree = res.newTvStructureTree
        this.oldTvStructureTree = res.oldTvStructureTree
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    update() {
      this.$emit('update', this.params.id)
      this.close()
    },
    // 窗口关闭前执行
    close() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

